<template>
  <BaseDialog
    :visible="visible"
    title="摄像机移动到分组"
    width="500px"
    :close-on-click-modal="false"
    footer-type="default"
    @update:visible="$emit('update:visible', $event)"
    @close="$emit('close')"
    @cancel="$emit('close')"
    @confirm="handleConfirm"
  >
    <div class="move-to-group-content">
      <div class="move-title">移动到</div>
      
      <div class="tree-container">
        <el-tree
          ref="treeRef"
          :data="menuTreeData"
          :props="treeProps"
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          :highlight-current="true"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="tree-node">
              <el-icon class="node-icon">
                <Folder />
              </el-icon>
              <span class="node-label">{{ data.name }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { ElTree, ElIcon } from 'element-plus'
import { Folder } from '@element-plus/icons-vue'
import { getAllMenu } from '@/api/device'
import { buildTree } from '@/utils/tree'
import type { DeviceMenu } from '@/types'

// Props
interface Props {
  visible: boolean
  selectedCameraIds: string[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'close': []
  'confirm': [targetGroupId: number]
  'update:visible': [value: boolean]
}>()

// 响应式数据
const treeRef = ref()
const menuTreeData = ref<DeviceMenu[]>([])
const selectedGroupId = ref<number | null>(null)
const defaultExpandedKeys = ref<number[]>([])

// 树组件配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 加载菜单树数据
const loadMenuTreeData = async () => {
  try {
    const response = await getAllMenu()
    const flatMenuData = response.data || []
    menuTreeData.value = buildTree(flatMenuData)
    
    // 默认展开第一层节点
    defaultExpandedKeys.value = menuTreeData.value.map(node => node.id)
  } catch (error) {
    console.error('加载菜单数据失败:', error)
  }
}

// 处理节点点击
const handleNodeClick = (data: DeviceMenu) => {
  selectedGroupId.value = data.id
}

// 处理确认
const handleConfirm = () => {
  if (!selectedGroupId.value) {
    return
  }
  
  emit('confirm', selectedGroupId.value)
}

// 监听visible变化，重置选择
watch(() => props.visible, (newVisible) => {
  if (newVisible) {
    selectedGroupId.value = null
    loadMenuTreeData()
  }
})

// 组件挂载时加载数据
onMounted(() => {
  loadMenuTreeData()
})
</script>

<style scoped>
.move-to-group-content {
  padding: 16px 0;
}

.move-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 16px;
  font-weight: 500;
}

.tree-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 8px;
}

.tree-node {
  display: flex;
  align-items: center;
  width: 100%;
}

.node-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #409eff;
}

.node-label {
  font-size: 14px;
  color: #606266;
}

/* 滚动条样式 */
.tree-container::-webkit-scrollbar {
  width: 6px;
}

.tree-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 树节点选中样式 */
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e1f3ff;
  color: #409eff;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f0f9ff;
}
</style>
